<template>
  <div class="min-h-screen bg-gray-100">

    <!-- 主要内容区域 -->
    <div class="mx-auto">
      <div class="flex">
        <!-- 左侧 PDF 阅读器 -->
        <div class="w-3/4 bg-white rounded-lg h-full">
          <!-- PDF 工具栏 -->
          <div class="p-4 border-b flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <button 
                @click="handleZoomOut"
                class="p-2 hover:bg-gray-100 rounded"
                title="缩小"
              >
                <i class="fas fa-search-minus">-</i>
              </button>
              <span class="text-gray-600">{{ (scale * 100).toFixed(0) }}%</span>
              <button 
                @click="handleZoomIn"
                class="p-2 hover:bg-gray-100 rounded"
                title="放大"
              >
                <i class="fas fa-search-plus">+</i>
              </button>
              <div class="h-6 w-px bg-gray-200 mx-2"></div>
              <select 
                v-model="currentPage" 
                class="border rounded px-3 py-2"
              >
                <option 
                  v-for="n in pageCount" 
                  :key="n" 
                  :value="n"
                >
                  第 {{ n }}/{{ pageCount }} 页
                </option>
              </select>
            </div>

            <div class="flex items-center space-x-4">
              <button 
                @click="handleRotate"
                class="p-2 hover:bg-gray-100 rounded"
                title="旋转"
              >
                <i class="fas fa-sync-alt"></i>
              </button>
              <button 
                @click="toggleFullscreen"
                class="p-2 hover:bg-gray-100 rounded"
                title="全屏"
              >
                <i class="fas fa-expand"></i>
              </button>
            </div>
          </div>

          <!-- PDF 查看器 -->
          <div 
            class="relative h-[calc(100vh-5rem)] overflow-auto"
            ref="pdfContainer"
          >
            <div 
              v-if="loading" 
              class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-80"
            >
              <div class="text-primary">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
              </div>
            </div>
            <VuePdfEmbed
              :source="pdfUrl"
              :page="currentPage"
              :scale="scale"
              :rotation="rotation"
              @loaded="handlePdfRendered"
              @loading="loading = $event"
            />
          </div>
        </div>

        <!-- 右侧商品和订单信息 -->
        <div class="w-1/4 h-screen">
          <div class="h-full">
            <div class="bg-white h-full p-6">
              <!-- 商品信息 -->
              <h1 class="text-2xl font-bold mb-4">{{ product.name }}</h1>
              <div class="goods-info mb-4 flex">
                <!-- 主图 -->
                <div class="w-1/5 mb-4">
                  <img 
                    src="@/assets/img/c4a191e9818713e771719a02cd71f477.jpg" 
                    :alt="product.name"
                    class="w-full h-auto rounded-lg"
                  >
                </div>
                
                <div class="space-y-6">
                  <!-- 基本信息 -->
                  <div class="space-y-4">
                    <div class="flex items-center text-gray-600">
                      <span class="">Manufacturer：</span>
                      <span>{{ product.brand }}</span>
                    </div>
                    <div class="flex items-center text-gray-600">
                      <span class="">Selling Point：{{ product.SellingPoint }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 库存信息 -->
              <div class="items-center text-gray-600 p-2 bg-slate-100 mb-4">
                <span class="w-20 text-lg font-bold">In Stock：</span>
                <span class="text-lg font-semibold text-blue-500">{{ product.stock }} </span>
                <p class="text-neutral-400">Please send RFQ , we will respond immediately</p>
              </div>
              <!-- 订单表单 -->
              <form @submit.prevent="handleSubmit" class="space-y-4 ">

                <!-- 联系信息 -->
                <div class="">
                  <label class="block text-sm font-medium text-gray-700 mb-1">
                    Contact Name
                  </label>
                  <input 
                    type="text"
                    v-model="orderInfo.contact"
                    class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                    placeholder="Please input contact name"
                  >
                </div>
                <div class="">
                  <label class="block text-sm font-medium text-gray-700 mb-1">
                    Business Email
                  </label>
                  <input 
                    type="text"
                    v-model="orderInfo.email"
                    class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                    placeholder="Please input bissness email"
                  >
                </div>
                <div class="">
                  <label class="block text-sm font-medium text-gray-700 mb-1">
                    Company Name
                  </label>
                  <input 
                    type="text"
                    v-model="orderInfo.company"
                    class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                    placeholder="Please input company name"
                  >
                </div>
                <div class="">
                  <label class="block text-sm font-medium text-gray-700 mb-1">
                    Country
                  </label>
                  <input 
                    type="text"
                    v-model="orderInfo.country"
                    class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                    placeholder="Please input country name"
                  >
                </div>
                <div class="gap-4">
                  <div class="">
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                      Quantity
                    </label>
                    <input 
                      type="number"
                      v-model="orderInfo.quality"
                      class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                      placeholder=""
                    >
                  </div>
                </div>
                <!-- 提交按钮 -->
                <button 
                      type="submit"
                      class="text-sm w-full bg-primary text-white py-3 rounded-md hover:bg-opacity-90 transition-colors"
                    >
                      Quick RFQ
                    </button>
                <button 
                  type="submit"
                  class="text-sm w-full bg-white text-primary border border-solid border-blue-300 py-3 rounded-md hover:bg-opacity-90 transition-colors"
                >
                  Add to RFQ list
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'

import pdfsource from '@/assets/c011.pdf'
// PDF 相关状态
const pdfUrl = pdfsource
const currentPage = ref(1)
const pageCount = ref(1)
const scale = ref(1)
const rotation = ref(0)
const loading = ref(true)
const pdfContainer = ref<HTMLElement | null>(null)

// 订单信息
const orderInfo = ref({
  contact: '',
  email: '',
  company: '',
  country: '',
  quality: 1,
})

// 模拟产品数据
const product = ref({
  id: 1,
  name: 'STM32F103C8T6',
  price: 12.80,
  originalPrice: 15.00,
  model: 'STM32F103C8T6',
  brand: 'ST',
  stock: 999,
  description: 'STM32F103C8T6是意法半导体推出的ARM Cortex-M3内核微控制器，主频72MHz，64KB Flash，20KB SRAM，支持SWD和JTAG调试。',
  datasheet: 'ICL4891JIM48561',
  images: [
    '/images/stm32-1.jpg',
    '/images/stm32-2.jpg',
    '/images/stm32-3.jpg',
    '/images/stm32-4.jpg'
  ],
  SellingPoint: 'Compression Fittings Have A Single Sleeve Which Bites into Tubing As You TightenThe Nut To Create A Strong Seal. Zinc-Plated Steel ls Strong And Has Fair Corrosion Resistance.',
  specifications: [
    { name: '内核', value: 'ARM Cortex-M3' },
    { name: '主频', value: '72MHz' },
    { name: 'Flash', value: '64KB' },
    { name: 'SRAM', value: '20KB' },
    { name: '工作电压', value: '2.0V - 3.6V' },
    { name: 'GPIO', value: '37个可重映射IO口' }
  ]
})


// PDF 操作方法
const handlePdfRendered = (numberOfPages: any) => {
  pageCount.value = numberOfPages.numPages
  loading.value = false
}

const handleZoomIn = () => {
  scale.value = Math.min(scale.value + 0.1, 2)
}

const handleZoomOut = () => {
  scale.value = Math.max(scale.value - 0.1, 0.5)
}

const handleRotate = () => {
  rotation.value = (rotation.value + 90) % 360
}


const handlePrint = () => {
  window.print()
}

// 提交订单
const handleSubmit = () => {
  console.log('提交订单', {
    product: product.value.id,
    ...orderInfo.value
  })
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    pdfContainer.value?.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
</script>

<style>
@media print {
  .no-print {
    display: none;
  }
}
</style>